<template>

	<view class="content">
		<view class="form-box">
			<view class="form-title">
				<text>请填写申请信息</text>
				<text>申请成为摄影师或司机或管家</text>
			</view>
			<u--form :model="registerForm" ref="registerForm" :labelStyle="{fontSize:'30rpx'}" labelWidth="150rpx">
				<u-form-item label="角色选择" prop="applicationType" labelPosition='top'>
					<view class="role-list">
						<view @click="toggleRole(item.dictValue)"
							:class="{role: true, 'role-select' : isRoleSelected(item.dictValue)}"
							v-for="(item, index) in roleList" :key="index">
							<text class="label">{{item.dictLabel}}</text>
						
						</view>
					</view>
				</u-form-item>
				<u-form-item label="姓名" prop="name" borderBottom>
					<u-input v-model="registerForm.name" placeholder="请输入姓名" border="none"  />
				</u-form-item>

				<u-form-item label="手机" prop="phone" borderBottom>
					<u-input v-model="registerForm.phone" placeholder="请输入手机" border="none"  />
				</u-form-item>
				<u-form-item label="身份证" prop="idCard" borderBottom>
					<u-input v-model="registerForm.idCard" placeholder="请输入身份证号" border="none"  />
				</u-form-item>
				<u-form-item label="账号密码" prop="password" borderBottom>
					<view class="box-password">
						<!-- <u-input v-model="registerForm.password" :type="showPassword==true? text : password"
								placeholder="请输入账号密码" border="none" fontSize="26rpx" /> -->
						<u-input v-model="registerForm.password" :type="showPassword ? 'text' : 'password'"
							placeholder="请输入密码" :password="!showPassword">
							<template slot="suffix">
								<u-icon :name="showPassword ? 'eye-fill' : 'eye-off'" size="20px" color="#ebebeb"
									@click="togglePasswordVisibility"></u-icon>
							</template>
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="确认密码" prop="password" borderBottom>
					<view class="box-password">
						<!-- <u-input v-model="registerForm.password" :type="showPassword==true? text : password"
								placeholder="请输入账号密码" border="none" fontSize="26rpx" /> -->
						<u-input v-model="submitpassword" :type="showsubmitpassword ? 'text' : 'password'"
							placeholder="请输入密码" :password="!showsubmitpassword">
							<template slot="suffix">
								<u-icon :name="showsubmitpassword ? 'eye-fill' : 'eye-off'" size="20px" color="#ebebeb"
									@click="togglePasswordVisibility1"></u-icon>
							</template>
						</u-input>
					</view>
				</u-form-item>
				<u-form-item label="性别" prop="sex" borderBottom>
					<view class="radio-box">
						<u-radio-group v-model="registerForm.sex" size='35rpx' iconSize='35rpx' activeColor="#f55c21">
							<u-radio :customStyle="{marginRight: '30rpx'}" labelSize='30rpx'
								:iconColor="registerForm.sex=='male_photography'?'#f55c21':'#c0c4cc'"
								name="male_photography">
								<text style="margin-right: 10rpx;font-size:30rpx;">男</text>
								<image class="sexIcon" src="../../static/login/boy.png"></image>
							</u-radio>
							<u-radio :customStyle="{marginRight: '30rpx'}" labelSize='30rpx'
								:iconColor="registerForm.sex=='female_photography'?'#f55c21':'#c0c4cc'"
								name="female_photography">
								<text style="margin-right: 10rpx;font-size:30rpx;">女</text>
								<image class="sexIcon" src="../../static/login/gril.png"></image>
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<!-- <u-form-item label="年龄" prop="age" borderBottom>
						<u-input v-model="registerForm.age" placeholder="请输入年龄" border="none" fontSize="26rpx" />
					</u-form-item> -->
				<u-form-item label="性质" prop="nature" borderBottom>
					<view class="radio-box">
						<u-radio-group v-model="registerForm.nature" size='35rpx' iconSize='35rpx'
							activeColor="#f55c21">
							<u-radio :customStyle="{marginRight: '30rpx'}" labelSize='30rpx' v-for="i in natureList"
								:key="i.value" :name="i.value" :label="i.label">
							</u-radio>
						</u-radio-group>
					</view>
				</u-form-item>
				<u-form-item label="公司名" prop="companyName" borderBottom v-if="registerForm.nature==2">
					<!-- <u-form-item label="公司名" prop="companyName" borderBottom> -->
					<u-input v-model="registerForm.companyName" placeholder="请输入公司名" border="none" fontSize="26rpx" />
				</u-form-item>
				<!-- <u-form-item label="执照" prop="name" borderBottom v-if="registerForm.nature==2"> -->
				<!-- <u-form-item label="执照" prop="license" borderBottom>
						<u-upload :fileList="photoList" @afterRead="afterRead" @delete="deletePic" multiple
							:previewFullImage="true" uploadIcon="plus" :maxCount="1000"></u-upload>
					</u-form-item> -->
				<u-form-item label="地区" prop="city" borderBottom>
					<picker mode="region" :value="city" class="u-w-440" @change="cityChange">
						<u--input border="bottom" class="u-fb u-f-s-28" placeholder="请选择省市区" type="text" readonly
							v-model="city" suffixIcon="arrow-right" suffixIconStyle="color: #B6B6B6" />
					</picker>
				</u-form-item>
			</u--form>
		</view>

		<view class="customizedRoute">
			<view class="customizedRoute-button" @click="getregisterAudit()">提交</view>
		</view>
	</view>

</template>

<script>
	// import myPicker from '@/components/myPicker/myPicker.vue'
	// import statusBar from '@/mixins/statusBar.js'
	export default {
		// mixins: [statusBar],
		// components: {
		// 	myPicker
		// },
		data() {
			return {
				roleList: [],
				natureList: [{
					label: '个人',
					value: 1,
				}, {
					label: '团队',
					value: 2,
				}],

				registerForm: {
					name: '',
					applicationType: [],
					sex: 'male_photography',
					// age: "",
					nature: 1,
					companyName: "",
					idCard: "",
					phone: "",
					// license: '',
					areaId: "",
					password: ""
				},
				pathDate: [],
				photoList: [],
				city: "",
				showPassword: false,
				showsubmitpassword: false,
				submitpassword: ''
			}
		},
		onLoad() {
			// 身份
			this.getdictdatatype()
		},
		methods: {
			backLogin() {
				uni.navigateBack()
			},
			togglePasswordVisibility() {
				this.showPassword = !this.showPassword;
			},
			togglePasswordVisibility1() {
				this.showsubmitpassword = !this.showsubmitpassword;
			},
			// changeRole(value) {
			// 	this.registerForm.applicationType = value
			// },
			toggleRole(dictValue) {
				const index = this.registerForm.applicationType.indexOf(dictValue);
				if (index === -1) {
					// 如果不存在，则添加
					this.registerForm.applicationType.push(dictValue);
				} else {
					// 如果已存在，则移除
					this.registerForm.applicationType.splice(index, 1);
				}
			},
			isRoleSelected(dictValue) {
				return this.registerForm.applicationType.includes(dictValue);
			},
			// 新增图片
			async afterRead(event) {
				let lists = [].concat(event.file)
				let fileListLen = this.photoList.length
				lists.map((item) => {
					this.photoList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.$u.api.uploadFile(lists[i].url)
					console.log(result);
					let item = this.photoList[fileListLen]
					this.photoList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url
					}))
					fileListLen++
				}
			},
			// 删除图片
			deletePic(event) {
				this.photoList.splice(event.index, 1)
			},
			// 身份字典
			async getdictdatatype() {
				let res = await this.$u.api.getdictdatatype({
					dictType: 'application_type'
				})
				if (res.code == 200) {
					this.roleList = res.data
				}
			},
			// 选择城市
			cityChange(e) {
				this.registerForm.areaId = e.detail.code[1]
				this.province = e.detail.value[0];
				this.city = e.detail.value[1];
				this.district = e.detail.value[2];
				this.city = e.detail.value[0] + e.detail.value[1] + e.detail.value[2];
			},
			// 注册
			async getregisterAudit() {
				console.log(this.registerForm);
				if (!this.registerForm.name) return this.$u.toast('姓名不能为空')
				let phone =
					/^(\+?0?86\-?)?1[3-9]\d{9}$/;
				if (!phone.test(this.registerForm.phone)) {
					this.$u.toast('手机号格式不正确！')
					return;
				}
				let idCard = /^[1-9]\d{5}(18|19|20|21|22)?\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|[Xx])$/;
				if (!idCard.test(this.registerForm.idCard)) {
					this.$u.toast('身份证格式不正确！')
					return;
				}
				if (!this.registerForm.password) return this.$u.toast('密码不能为空')
				if (this.submitpassword != this.registerForm.password) return this.$u.toast('两次输入的密码不一致')
				let birthday = this.registerForm.idCard.substring(6, 14)
				let currentYear = new Date().getFullYear();
				// let age = currentYear - birthday.substring(0, 4);
				// if (this.registerForm.age != age) {
				// 	this.$u.toast('年龄不正确！')
				// 	return;
				// }
				// if (!this.photoList.length) return this.$u.toast('执照不能为空')
				if (this.registerForm.nature == 2) {
					if (!this.registerForm.companyName) return this.$u.toast('公司不能为空')
				}
				if (!this.registerForm.areaId) return this.$u.toast('地区不能为空')
				this.registerForm.license = this.photoList.map(i => i.url).join(",")
				console.log(this.registerForm);
				let res = await this.$u.api.getregisterAudit(this.registerForm)
				if (res.code == 200) {
					this.$u.toast('申请成功！')
					uni.switchTab({
						url: '/pages/me/index'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		padding: 50rpx 100rpx calc(env(safe-area-inset-bottom) + 100rpx);

		.form-box {
			margin-bottom: 10rpx;

			.form-title {
				margin-bottom: 80rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				color: #333;
			}

			.radio-box {
				.sexIcon {
					width: 50rpx;
					height: 50rpx;
				}
			}

			.role-list {
				padding: 0 14rpx;
				display: flex;
				margin-top: 40rpx;
				justify-content: space-between;
				align-items: center;
				
				.label{
					font-size:18rpx;
				}

				.role {
					width: 110rpx;
					height:110rpx;
					border-radius: 50%;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: #ececec;
					border:1rpx solid #ececec;
					color:#333;
				}

				.role-select {
					border:1rpx solid $overall-color;
					color: $overall-color;
				}
			}
		}


	}



	.customizedRoute {
		width: 100%;
		padding: 20rpx 55rpx calc(env(safe-area-inset-bottom) + 10rpx);
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: white;
		z-index: 99;

		.customizedRoute-button {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 40rpx;
			font-size: 36rpx;
			color: #fff;
			background-color: $overall-color;
			text-align: center;
			box-sizing: border-box;
		}
	}
	
	.u-form-item{
		margin-top:40rpx;
		
		
	
	}
</style>